import styled from 'styled-components'
import {primary} from './common'

/**
 * 基于 styled.标签名 这种方式编写的样式
 *     + 样式要写在ES6模板字符串中
 *     + 返回并且导出的结果是一个自定义组件 {组件就可以传递属性，内部props进行接受，动态处理变量样式了}
 * 
 * 
 * 
 *  如果编写样式的时候VScode编辑器没有提示，需要安装插件: vscode-styled-components
 */

const AboutBox = styled.div.attrs(props => {
    return {
        color: primary || 'red',
        fontSize: props.fontSize || 30
    }
})`
    border:1px solid blue;
   .username {
        color:${props => props.color};
        &:hover {
            font-weight:bold;
            cursor:pointer;
        }
   }
    .age {
        color:pink;
    }
    button {
        background:blue;
        color:${props => props.color};
        text-align:center;
        font-size: ${props => props.fontSize}px;
        &:hover {
            background:red;
        }
    }
`
console.log(AboutBox);


const About = () => {
    return <>
        <div>
            <p>关于我们</p>
            <p>信息</p>
        </div>

        <AboutBox color='#0f0' fontSize='50'>
            <div className='username'>react-styled-components</div>
            <p className='age'>18</p>
            <button>我是一个按钮</button>
        </AboutBox>
    </> 
}

export default About;